<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
<head>
  
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
</head>
<body>

  <div class="page-group">
    <div class="page page-current">
      
      <header class="bar bar-nav fs-header-small">
        <a href="${ctx.host}/profile/course-schedules/${courseSchedule.id}" class="button button-link button-nav pull-left"><span class="icon icon-left"></span></a>
        <h1 class="title">
          <strong>预约换课</strong>
          <input type="hidden" name="day" value='<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd"/>'>
          <input type="hidden" name="hour">
        </h1>
      </header>

      <div class="content">
        
        <div class="buttons-tab appoint-tab">
          <c:forEach var="day" items="${thisWeek}" varStatus="status">
            <fmt:formatDate value="${day}" var="dayString" pattern="yyyy-MM-dd" />
            <fmt:formatDate value="${currentDay}" var="currentDayString" pattern="yyyy-MM-dd" />
            <a href="${ctx.host}/profile/course-schedules/${courseSchedule.id}/edit?day=${dayString}" class="tab-item ${currentDayString eq dayString ? 'active' : ''} button">
              <small><fmt:formatDate value="${day}" pattern="EEEE" /></small><br style="height: 0px;">
              <span class="day"><fmt:formatDate value="${day}" pattern="dd" /></span>
            </a>
          </c:forEach>
        </div>
        
        <div class="appoint-currentDay">
          <p><fmt:formatDate value="${currentDay}" pattern="EEEE MMMM dd, yyyy"/></p>
        </div>
        
        <div class="content-block" style="margin: 0px; margin-top: 4.25rem; padding: 0px;">
          <div class="tabs">
            <fmt:formatDate value="${currentDay}" var="currentDayString" pattern="yyyy-MM-dd" />
            <fmt:formatDate value="${currentDay}" var="currentHourString" pattern="HH" />
            <div class="tab active">
              <div class="list-block" style="margin: 0px;">
                <ul>
                  <c:forEach var="hour" begin="${appointStartTime[0]}" end="${appointEndTime[0]-1}">
                    <c:set var="day" value="${currentDayString}|"></c:set>
                    <c:set var="dayhour" value="${currentDayString}|${hour}:00"/>
                    <c:set var="halfhour" value="${currentDayString}|${hour}:30"/>
                    <c:set var="afterdayhour" value="${currentDayString}|${hour+1}:00"/>
                    <c:set var="beforedayhour" value="${currentDayString}|${hour-1}:00"/>
                    <c:set var="beforehalfhour" value="${currentDayString}|${hour-1}:30"/>
                    <c:set var="afterhalfhour" value="${currentDayString}|${hour+1}:30"/>
                    <c:set var="validatehalfhour" value="${courseSchedule.dayhour == dayhour or courseSchedule.dayhour == afterdayhour}"/>
                    <c:set var="validatedayhour" value="${courseSchedule.dayhour == beforehalfhour or courseSchedule.dayhour == halfhour}"/>
                    <c:set var="isEndHour" value="${hour == appointEndTime[0]-1 and appointEndTime[1] == 30}"/>
                    <c:choose>
                      <c:when test="${today}">
                        <c:choose>
                          <c:when test="${hour == currentHour and currentMinute < 30 }">
                            <%@ include file="/WEB-INF/jsps/course/course-schedule-halfhour-item.jsp" %>
                          </c:when>
                          <c:when test="${hour > currentHour}">
                            <c:choose>
                              <c:when test="${hour == appointStartTime[0] and appointStartTime[1] == '30'}">
                                <%@ include file="/WEB-INF/jsps/course/course-schedule-halfhour-item.jsp" %>
                              </c:when>
                              <c:otherwise>
                                <%@ include file="/WEB-INF/jsps/course/course-schedule-whole-hour-item.jsp" %>
                              </c:otherwise>
                            </c:choose>
                          </c:when>
                        </c:choose>
                      </c:when>
                      <c:otherwise>
                        <c:choose>
                          <c:when test="${hour == appointStartTime[0] and appointStartTime[1] == '30'}">
                            <%@ include file="/WEB-INF/jsps/course/course-schedule-halfhour-item.jsp" %>
                          </c:when>
                          <c:otherwise>
                            <%@ include file="/WEB-INF/jsps/course/course-schedule-whole-hour-item.jsp" %>
                          </c:otherwise>
                        </c:choose>
                      </c:otherwise>
                    </c:choose>
                  </c:forEach>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <a class="item-content item-link hide" href="#coach-select" data-toggle="push"></a>
        
      </div>
      
    </div>
  </div>
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/course/edit.js" />
  <script type="text/javascript">
    var jsConfig = JSON.parse('${wechatJsConfig}')
    require(['page/course/edit'], function(page) {
      page.init({
        jsConfig: jsConfig,
        scheduleId: '${courseSchedule.id}'
      })
    })
  </script>
  
</body>
</html>